<template>
  <div class="columnModel" id="columnModel">
    <a-tree-select
        v-model:value="siteId"
        show-search
        style="width: 230px"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :fieldNames="{
        label: 'siteName',
        value: 'id',
      }"
        placeholder="请选择站点"
        allow-clear
        tree-default-expand-all
        :tree-data="documentOptions"
        tree-node-filter-prop="siteName"
        @change="changeSite"
      >
      <template #title="row">
        <span>{{ row.siteName }}</span>
    </template>
      </a-tree-select>
      <a-input v-model:value="channelName"
      :disabled="!siteId"
      allow-clear
      @blur="changeChannelName" @keyup.enter.native="changeChannelName"
      placeholder="请输入栏目名称"  style="width: 192px;height: 32px;margin-left: 20px;">
            <template #suffix>
              <i class="iconfont icon-search"></i>
            </template>
          </a-input>
    <a-button type="primary" style="margin-left: 20px;" @click="siteStatic(1)" :disabled="!rowSelection.length">栏目静态化</a-button>
    <a-button type="primary" style="margin-left: 20px;" @click="siteStatic(2)" :disabled="!siteId">站点首页静态化</a-button>
    <a-button type="primary" style="margin-left: 20px;" @click="siteStatic(3)" :disabled="!siteId">内容静态化手动生成</a-button>
    <a-button type="primary" style="margin-left: 20px;" @click="siteStatic(4)" :disabled="!siteId">栏目静态化手动生成</a-button>
    <div class="table-container">
      <div class="table-left">
        <!-- 站点展示部分 -->
        <baseTable
          :columns="columns.staticzeColumns"
          :dataSource="configData.records"
          :isSelect="true"
          :scroll="scroll"
          :defaultExpandAllRows="false"
          ref="searchBaseTables2"
          :isShowPagination="false"
          :showCheckDelete="showCheckDelete"
          disabledParam="status"
          :disabledValue="true"
          @onSelectChange="onSelectChange"
        >
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.ellipsis">
              <span
                class="site-name"
                :class="siteId === record.id ? 'site-name-active' : ''"
                ><table-tool-tip :text="text" :column="column"></table-tool-tip
              ></span>
            </template>
          </template>
        </baseTable>
      </div>
      <div class="table-right">
        <!-- 静态化列表展示部分 -->
        <baseTable
          :columns="columns.staticzeColumns2"
          :dataSource="configData2.records"
          :total="configData2.total"
          :pageCurrent="pageCurrent"
          :pageSize="pageSize"
          :isSelect="true"
          :scroll="scroll"
          ref="searchBaseTables"
          :isShowPagination="true"
          :showCheckDelete="true"
          @changePage="changePage"
          disabledParam="status"
          :disabledValue="true"
        >
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.ellipsis">
              <table-tool-tip :text="text" :column="column"></table-tool-tip>
            </template>
            <template v-if="column.dataIndex === 'status'">
              {{ statusFn(text) }}
            </template>
            <template v-if="column.dataIndex === 'creatTime'">
              {{ text }}
            </template>
            <template v-if="column.dataIndex === 'operation'">
              <a style="margin-right: 16px;" @click="goDetail(record)">查看详情</a>
              <a-popconfirm placement="topRight" 
              :disabled="record.status == 1"
              @confirm="confirmDelete(record)">
                <template #title>
                  <p style="width: 197px">
                    是否确认删除此任务？
                  </p>
                </template>
                <a :class="{ disable: record.status == 1}">删除</a>
              </a-popconfirm>
            </template>
          </template>
          <template #otherOpration>
        <a-button :style="{ 'margin-left': '8px' }" @click="deleteSelectedAll"
          :disabled="!rowSelection2.length">删除</a-button>
      </template>
        </baseTable>
      </div>
    </div>
    <base-modal
      :width="modAlProps.width"
      :isVisible="isVisible"
      :title="modAlProps.title"
      :buttons="buttons"
      @handleOk="buttonMessage"
      @handleCancle="cancle"
      class="staticize_modal"
    >
      <template v-slot:body>
        <a-form
          :model="formState"
          class="ant-advanced-search-form"
          autoComplete="off"
          ref="userManageFrom"
        >
          <a-form-item
            class="staticize-input"
            :label="formState.taskName.label"
            :name="['taskName', 'value']"
            :rules="formState.taskName.rule"
          >
            <a-input
              placeholder="请输入静态化任务名称"
              v-model:value="formState.taskName.value"
              show-count
              :maxlength="50"
              allow-clear
            />
          </a-form-item>
          <!-- 内容 -->
          <!-- :label="formState.contentId.label" -->
          <a-form-item
          v-if="modelType == 3"
            class="staticize-input"
            :name="['contentId', 'value']"
            :rules="formState.contentId.rule"
          >
          <template #label>
            <span class="content_id">{{formState.contentId.label}}</span>
          </template>
            
              <template v-for="(item, index) in contentList" :key="index">
              <div style="display: flex;margin-bottom: 22px;align-items: center">
              <a-form-item-rest>
                <a-input
              placeholder="请输入内容ID"
              v-model:value="item.value"
              show-count
              style="width: 410px;"
              :maxlength="20"
              allow-clear
            />
          </a-form-item-rest>
            <span v-if="contentList.length - 1 == index" :class="contentList.length > 9 ? 'disable' : ''" class="iconfont icon-add" @click="changeContentList(1, index)"></span>
            <span v-if="index !== 0" class="iconfont icon-delete1" @click="changeContentList(2, index)"></span>
              </div>
            </template>
            
            <div v-if="noContentIds.length" style="margin-bottom: 20px;color:#ff4d4f;">内容ID：{{ noContentIds.join('，') }} 数据不存在或非发布状态</div>
            <a-button type="primary" :disabled="!contentList.some((item: any) => item.value)" @click="verifyContentId(1)" >校验</a-button>
            <span class="tips_text">建议生成静态化前校验内容ID，可确认数据是否存在。</span>
          </a-form-item>
          <!-- 栏目 -->
          <a-form-item
          v-if="modelType == 4"
            class="staticize-input"
            :name="['channelId', 'value']"
          >
          <template #label>
            <span class="content_id">{{formState.channelId.label}}</span>
          </template>
            <a-input
              placeholder="请输入栏目ID"
              v-model:value="formState.channelId.value"
              show-count
              :maxlength="20"
              allow-clear
            />
            <div v-if="!noChannel" style="margin-top: 20px;color:#ff4d4f;">栏目ID：{{ formState.channelId.value }} 数据不存在</div>
            <a-button type="primary" style="margin-top: 20px;" :disabled="!formState.channelId.value" @click="verifyContentId(2)">校验</a-button>
            <span class="tips_text">建议生成静态化前校验栏目ID，可确认数据是否存在。</span>
            <a-button v-if="!channelList.length" type="primary" style="margin-top: 20px;" @click="addChannelPage">添加指定生成页码</a-button>
          </a-form-item>
          
          <a-form-item
          v-if="modelType == 4 && channelList.length"
            class="staticize-input"
            label="指定生成页码"
          >
            <template v-for="(item, index) in channelList" :key="index">
              <div style="display: flex;margin-bottom: 22px;align-items: center">
                <a-form-item-rest>
                <a-input-number
                  placeholder="请输入页码数"
                  v-model:value="item.value"
                  style="width: 410px;"
                  :maxlength="50"
                  min="1"
                  allow-clear
                />
              </a-form-item-rest>
            <span v-if="channelList.length - 1 == index" :class="channelList.length > 9 ? 'disable' : ''" class="iconfont icon-add" @click="changeChannelList(1, index)"></span>
            <span class="iconfont icon-delete1" @click="changeChannelList(2, index)"></span>
              </div>
            </template>
            
          </a-form-item>
        </a-form>
      </template>
    </base-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, computed, createVNode } from "vue";
import baseTable from "@/components/table/baseTable.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import columns from "@/components/table/tableConfig/columnsName";
import { getTableScroll } from "@/components/table/tableConfig/table";
import baseModal from "@/components/modal/baseModal.vue";
import { Modal, message } from "ant-design-vue";
import request from "@/api/index";
import { scrollType, modeProp } from "@/type.d";
import { checkuserManage } from "./formRuler";
import msgModal from "@/components/modal/modelConfig/MsGModal";
import { useRouter } from "vue-router";

// type
type configDataType = {
  total: number;
  size: number;
  records: any[];
};
interface dataSourceType {
  [propName: string]: any;
}
interface DataList {
  [propName: string | number]: any;
}

//data
const documentOptions = ref<dataSourceType[]>([]);
let scroll: scrollType = reactive({ y: "", isFixed: false }); // 表单滚动设置
const showCheckDelete = false; // 是否需要分页器中的自定义全选和删除
const contentList = ref<DataList>([
  {
    value: null
  }
]);
const channelList = ref<DataList>([]);
const formState = reactive<dataSourceType>({
  taskName: {
    value: "",
    rule: {
      required: true,
      validator: checkuserManage,
      trigger: ["blur"],
      msg1: "任务名称不能为空！",
      msg2: "任务名称重复！",
      api: "webStaticNameAvailable",
      params: { id: null, siteId: null },
    },
    id: "",
    label: "静态化任务名称",
  },
  contentId: {
    value: "",
    rule: {
      required: false,
      trigger: ["blur"],
      message: "内容ID不能为空！",
    },
    id: "",
    label: "内容ID",
  },
  channelId: {
    value: "",
    rule: {
      required: false,
      trigger: ["blur"],
      message: "栏目ID不能为空！",
    },
    id: "",
    label: "栏目ID",
  },
});

//表格数据
let configData = reactive<DataList>({ records: [] }); // 站点表格数据
let configData2 = reactive<configDataType>({ total: 0, size: 20, records: [] });
let idFloat =reactive<any>({ });

const searchBaseTables = ref<any>(null);
const searchBaseTables2 = ref<any>(null);
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(20);
// 模态框数据
const userManageFrom = ref<any>(null); // 模态框表单实例
const isVisible = ref<boolean>(false);
const modelType = ref<any>(null);
let modAlProps: modeProp = reactive({
  width: "M",
  title: "栏目静态化",
});
const buttons = ref<dataSourceType[]>([
  {
    text: "确定",
    "html-type": "submit",
    keepAlive: true,
  },
]);
const siteId = ref<any>(null);
const router = useRouter();
const channelName = ref<any>(null);
let rowSelection = ref<(string | number)[]>([]);
let rowSelection2 = ref<(string | number)[]>([]);
const isHomePage = ref<boolean>(false);
const noContentIds = ref<dataSourceType>([]);
const noChannel = ref<boolean>(false);

//computed
rowSelection2 = computed(() => {
  return searchBaseTables?.value?.selectedRowKeys || [];
});

//methods
// 详情
const goDetail = async (val: any) => {
  console.log(111)
  router.push({
    path: "/content/staticize/detail",
    name: "任务详情",
    query: {
      id: val.id,
    },
  });
};
// 单个删除
const confirmDelete = async (item: any) => {
  deleteRecords([item.id]);
};
//多选删除
const deleteSelectedAll = async () => {
  let keys = rowSelection2.value;
  Modal.confirm(
    Object.assign({}, msgModal.confirm, {
      title: "是否确定批量删除任务？",
      content:
        "",
      icon: createVNode("i", {
        class: "iconfont icon-warn warning_ICON",

      }),
      okText: "确定",
      onOk: async () => {
        await deleteRecords(keys);
        Modal.destroyAll();
      },
      onCancel() {
        Modal.destroyAll();
      },
    })
  );
};
const deleteRecords = async (keys: (string | number)[] = []) => {
  await request.deleteTasks({ ids: keys }).then((res: any) => {
    if (res.code == "00000 00000") {
      searchBaseTables.value.selectedRowKeys = [];
      message.success(res.message);
      getRdecord2();
    } else {
      message.error(res.message);
    }
  });
};
const addChannelPage = () => {
  if(channelList.value.length < 1) {
    channelList.value.push({value: null})
  }
};
const changeContentList = (val: any, index: any) => {
  if(val == 1 && contentList.value.length < 10) {
    const obj = { value: null }
    contentList.value.push(obj)
  }
  if(val == 2) {
    contentList.value.splice(index, 1)
  }
};
const changeChannelList = (val: any, index: any) => {
  if(val == 1 && channelList.value.length < 10) {
    const obj = { value: null }
    channelList.value.push(obj)
  }
  if(val == 2) {
    channelList.value.splice(index, 1)
  }
};
const verifyContentId = (type: any) => {
  const ids = contentList.value.map((item: any) => item.value ? +item.value : undefined).filter((item: any) => item != undefined)
  let params = {}
  if(type == 1) {
    params = {
    contentIds: ids,
    siteId: siteId.value
  }
  }
  if(type == 2) {
    params = {
    id: formState.channelId.value,
    siteId: siteId.value
  }
  }
  
  if(type == 1) {
    request['notExistContents'](params)
        .then((res: any) => {
          if (res.code === "00000 00000") {
              noContentIds.value = res.data
            if(!noContentIds.value.length) {
              message.success('校验通过')
            }
          } else {
            message.error(res.message);
          }
        })
        .catch((err: any) => {
          throw new Error(err);
        });
  }
  if(type == 2) {
    request['channelExist'](params)
        .then((res: any) => {
          if(res) {
            message.success('校验通过')
          } else {
            noChannel.value = res
          }
        })
        .catch((err: any) => {
          throw new Error(err);
        });
  }
  
  
};
// 栏目静态化
const siteStatic = (val: any) => {
  noChannel.value = true
  modelType.value = val
  if(val == 1) {
    modAlProps.title = '栏目静态化'
    isHomePage.value = false
  } else if(val == 2) {
    modAlProps.title = '站点首页静态化'
    searchBaseTables2.value.selectedRowKeys = []
    rowSelection.value = []
    isHomePage.value = true
  } else if(val == 3) {
    modAlProps.title = '内容静态化手动生成'
    searchBaseTables2.value.selectedRowKeys = []
    rowSelection.value = []
  } else if(val == 4) {
    modAlProps.title = '栏目静态化手动生成'
    searchBaseTables2.value.selectedRowKeys = []
    rowSelection.value = []
  }
  formState.taskName.value = "";
  contentList.value = [{value: null}]
  channelList.value = []
  isVisible.value = true;
};
const getSiteList = async () => {
  const telData = await request.fetchsiteManageTabledData({});
  if (telData) {
    documentOptions.value = [telData];
    siteLoop(documentOptions.value)
  }
};

const siteLoop = (dataList: any = [], list: any[] = []) => {
  if(dataList) {
    for(let i in dataList) {
      if(!dataList[i].isSupportWebStatic) {
        dataList[i].disabled = true
      }
      if(dataList[i].children && dataList[i].children instanceof Array) {
        siteLoop(dataList[i].children)
      }
    }
  }
  return dataList
};

const onSelectChange = (e: any, list: any) => {
   let arrs = JSON.parse(JSON.stringify(e));
  let id =e?.length? e[e.length- 1] : e;
  if(rowSelection.value.length>e.length){ // 删除
    rowSelection.value = e
  }else{ // 增加
    let len = Object.keys(idFloat).length;
    
    if(id === true || len == arrs?.length){
      for(let i in idFloat){
        rowSelection.value.push(+i)
      }
      rowSelection.value = [...new Set(rowSelection.value)]
      return
    }
    if(Array.isArray(id) && id.length == 0){
      nextTick(()=>{
        rowSelection.value = [];
      searchBaseTables2.value.selectedRowKeys = []
      })
      
    }
    if(id!==true && !Array.isArray(id)){
      let childs = idFloat[id].childNodes.concat(id);
      rowSelection.value.push(...childs);
    }
    
  rowSelection.value = [...new Set(rowSelection.value)]
  }
   
  searchBaseTables2.value.selectedRowKeys = JSON.parse(JSON.stringify(rowSelection.value))  ;
  
  // console.log(rowSelection.value,'rowSelection.value');
  

};

// 确定
const buttonMessage = (msg: dataSourceType) => {
  userManageFrom.value
    .validateFields()
    .then((res: any) => {
      let data: any = {}
      if(modelType.value == 1) {
        data = {
        siteId: siteId.value,
        name: formState.taskName.value,
        channelIds: rowSelection.value
      };
      }
       if(modelType.value == 2) {
        data = {
        siteId: siteId.value,
        name: formState.taskName.value,
      };
      }
      if(modelType.value == 3) {
        data = {
        siteId: siteId.value,
        contentIds: contentList.value.map((item: any) => item.value ? +item.value : undefined).filter((item: any) => item != undefined),
        name: formState.taskName.value,
      };
      if(!data.contentIds.length) {
        return message.error('请输入内容ID!')
      }
      }
      if(modelType.value == 4) {
        data = {
        siteId: siteId.value,
        channelId: formState.channelId.value,
        name: formState.taskName.value,
        pages: channelList.value.map((item: any) => item.value ? +item.value : undefined).filter((item: any) => item != undefined),
      };
      if(!formState.channelId.value) {
        return message.error('请输入栏目ID!')
      }
      }
      request[modelType.value == 1 ? 'siteChannelStatic' : modelType.value == 2 ? 'siteIndexStatic' : modelType.value == 3 ? 'contentStatic' : modelType.value == 4 ? 'channelPageStatic' : ''](data)
        .then((res: any) => {
          if (res.code === "00000 00000") {
            message.success(res.message);
            searchBaseTables2.value.selectedRowKeys = []
            rowSelection.value = []
            getRdecord2();
            isVisible.value = false;
            searchBaseTables2.value.selectedRowKeys = [];
          } else {
            message.error(res.message);
          }
        })
        .catch((err: any) => {
          throw new Error(err);
        });
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

// 取消
const cancle = () => {
  isVisible.value = false;
  userManageFrom.value.resetFields();
};

// 站点栏目树
const getRdecord = async () => {
  if(siteId.value) {
    const data = (await request.siteChannelTree({siteId	: siteId.value, channelName: channelName.value})) || [];
    configData.records = data;
    loopFloat(configData.records, [],[]);
    nextTick(() => {
      let obj = getTableScroll(74, "columnModel", -50);
        scroll.y = obj.y;
    });
  } else {
    configData.records = [];
  }
  
};

// loopFloat 扁平化站群、菜单数据, vxeTable只识别扁平化数据
const loopFloat = (
  data: dataSourceType[],
  list: dataSourceType[],
  pid: (string | number | any)[]
) => {
  data?.forEach((item: dataSourceType) => {
    item.parentNodes = JSON.parse(JSON.stringify(pid));
    
    if (item.parentId) {
      item.parentNodes.push(item.parentId);
    }
    item.childNodes = [];
    if (item.children instanceof Array && item.children.length) {
      getChildIds(item.children, item.childNodes);
    }
 

    let obj = {
      ...item,
      id: item.id,
      parentId: item.parentId,
      parentNodes: item.parentNodes,
      childNodes: item.childNodes,
    };
    list.push(obj);
    idFloat[item.id] = obj;
   
    item.children && item.children.length
      ? loopFloat(
          item.children,
          list,
          JSON.parse(JSON.stringify(item.parentNodes))
        )
      : "";
  });
};

const getChildIds = (
  data: DataList[],
  list: (string | number)[]
) => {
  data.forEach((item: DataList) => {
    list.push(item.id);
    if (item.children instanceof Array && item.children.length) {
      getChildIds(item.children, list);
    }
  });
};

const changeSite = (val: any) => {
  siteId.value = val || null;
  formState.taskName.rule.params.siteId = val || null;
  searchBaseTables2.value.selectedRowKeys = [];
  rowSelection.value = [];
  getRdecord();
  getRdecord2();
};

const changeChannelName = () => {
  searchBaseTables2.value.selectedRowKeys = [];
  rowSelection.value = [];
  getRdecord();
  getRdecord2();
};

// 获取表格数据
const getRdecord2 = () => {
  // console.log(siteId.value, "siteName.value");
  if(siteId.value) {
    const data: {} = {
    pageNumber: pageCurrent.value,
    pageSize: pageSize.value,
    siteId: siteId.value,
  };
  request.getWebStaticPage(data).then((res: any) => {
    // console.log(res,'11211');
    configData2.total = res.total;
    configData2.size = res.size;
    pageCurrent.value = res.current;
    configData2.records = res.records;
  });
  } else {
    configData2.records = [];
  }
  
};
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
  getRdecord2();
};
const statusFn = (val: any) => {
  return val == 0
    ? "等待执行中"
    : val == 1
    ? "执行中"
    : val == 2
    ? "已取消"
    : val == 3
    ? "执行失败"
    : val == 4
    ? "执行成功"
    : "";
};



//onmounted
onMounted(() => {
  
  getSiteList();
});
</script>
<style lang="scss" scoped>
.columnModel {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;
  overflow: hidden;
  :deep(.ant-table-body) {
    height: 618px;
  }
  .table-container {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: max-content;
    .table-left {
      width: 400px;
      :deep(.ant-table-wrapper) {
        width: 400px;
      }
      :deep(.ant-table-thead .ant-table-cell:nth-last-of-type(1)) {
       text-align: left;
    }
    :deep(.ant-table-cell:nth-last-of-type(1)) {
      text-align: left;
    }
    :deep(table tr th.ant-table-selection-column, table tr td.ant-table-selection-column) {
      text-align: left;
    }
    }
  }
  .table-right {
    margin-left: 20px;
  }
  .site-name:hover {
    //color: #1f6ded;
    //cursor: pointer;
  }
  .site-name-active {
    color: #1f6ded;
  }
  ::v-deep(.ant-table-wrapper) {
    width: 100%;
  }

  ::v-deep(.ant-table-row-expand-icon) {
    border: none;
    background: transparent;
  }

  :deep(.ant-table-cell:nth-last-of-type(1)) {
    padding-left: 0;
    text-align: right;
  }
  .eidtRecords {
    margin-right: 16px;
  }

  .disable {
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
  }
}
.model-tip {
  margin-top: 8px;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
}

.tag-item {
  margin-bottom: 0 !important;
}
.title-tips {
  display: flex;
  margin-bottom: 24px;
  padding: 8px 16px;
  width: 592px;
  font-size: 14px;
  border: 1px solid #9cccff;
  border-radius: 2px;
  background-color: #edf7ff;
  .iconfont {
    margin-top: -4px;
    margin-right: 9px;
    font-size: 20px;
    color: #1f6ded;
  }
}
:deep(.ant-form-item:nth-last-of-type(1)) {
  margin-left: 0px;
}

::v-deep(.ant-input-number) {
  width: 136px;
  margin-left: 4px;
}

::v-deep(.ant-input-affix-wrapper) {
  width: 471px;
  // margin-left: 4px;
}

::v-deep(.ant-form-item) {
  display: flex;

  .ant-form-item-label {
    flex-grow: 0;
    width: 120px;
    text-align: right;
  }
}

::v-deep(.ant-select) {
  width: 96px;
}

::v-deep(.ant-form-item-control-input-content:hover) {
  .anticon-close-circle {
    display: block;
  }

  // .ant-input-show-count-suffix {
  //   // display: none;
  // }
}

::v-deep(.anticon-close-circle) {
  // display: none;
}
::v-deep(.anticon.ant-input-clear-icon-has-suffix) {
  // margin-right: 20px;
}
::v-deep(.draggTable .ant-table-row) {
  cursor: auto;
  user-select: auto;
}

.addButtons {
  display: flex;
  align-items: center;
  width: 84px;
  padding: 4px 12px;
  border-radius: 2px;
  .icon-plus {
    margin-right: 8px;
  }
}
.selectLable {
  font-size: 14px;
  margin-left: 15px;
}
.content_id::before {
  display: inline-block;
    margin-right: 4px;
    color: #ff4d4f;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
}
</style>
<style lang="less" scoped>
.staticize-input {
  .iconfont {
    margin-left: 10px;
    cursor: pointer;
  }
}
::v-deep(.uporg-text) {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}
::v-deep(.ant-tree-switcher) {
  // display: none !important;
}
::v-deep(.ant-tree .ant-tree-treenode) {
  padding: 0 !important;
}
.fileName {
  white-space: nowrap;
}
.disable {
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed !important;
  }
.tips_text {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}

</style>
